var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

function Point(x, y){
    this.x = x;
    this.y = y;
}

function Ball(x, y, radius, speed, t){
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.speed = speed;
    this.t = t;
}

/**
 * 匀速圆周运动以及螺旋运动。
 */
function drawLuoxuan(){
    context.fillStyle = '#cccccc';
    context.fillRect(0, 0, 500, 500);
    context.strokeRect(0, 0, 500, 500);

    context.beginPath();
    context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
    context.stroke();
    context.closePath()

    var x = ball.x + ball.radius  * Math.sin(angle * Math.PI / 180);
    var y = ball.y + ball.radius *  Math.cos(angle * Math.PI / 180);
    context.beginPath();
    context.fillStyle = '#000000';
    context.arc(x, y, 10, 0, 2 * Math.PI);
    context.fill();
    context.closePath();

    luo.radius -= radiusInc;
    if (luo.radius < 0 || luo.radius > 100) {
        radiusInc -= 2 *radiusInc;
    }
    var x = luo.x + luo.radius * Math.sin(angle * Math.PI / 180);
    var y = luo.y + luo.radius *  Math.cos(angle * Math.PI / 180);
    context.beginPath();
    context.fillStyle = '#000000';
    context.arc(x, y, 10, 0, 2 * Math.PI);
    context.fill();
    context.closePath();

    angle += speed;
    angle %= 360;
}

/**
 * 循环的贝塞尔曲线
 */
function draw(){
    context.fillStyle = '#cccccc';
    context.fillRect(0, 0, 500, 500);
    context.strokeRect(0, 0, 500, 500);

    // 绘制控制点
    context.beginPath();
    context.fillStyle = 'black';
    context.arc(p1.x, p1.y, 3, 0, Math.PI * 2, true);
    context.stroke();
    context.arc(p2.x, p2.y, 3, 0, Math.PI * 2, true);
    context.stroke();
    context.closePath();

    var cx = 3 * (p1.x - p0.x);
    var bx = 3 * (p2.x - p1.x) - cx;
    var ax = p3.x - p0.x -cx -bx;

    var t = ball.t;
    var cy = 3 * (p1.y - p0.y);
    var by = 3* (p2.y - p1.y) - cy;
    var ay = p3.y - p0.y - cy - by;

    var xt = ax * (t * t * t) + bx * (t * t) + cx * t + p0.x;
    var yt = ay * (t * t * t) + by * (t * t) + cy * t + p0.y;
    if (ball.t > 1){
        ball.t = 1;
    }
    ball.t += ball.speed;
    if (ball.t > 1 || ball.t < 0) {
        ball.speed = 0 - (ball.speed);
    }

    // 记录轨迹并绘制轨迹
    record.push(new Point(xt, yt));
    record.forEach(function(item){
        context.beginPath();
        context.fillStyle = 'black';
        context.arc(item.x, item.y, 2, 0, Math.PI * 2, true);
        context.fill();
        context.closePath();
    });

    context.beginPath();
    context.fillStyle = 'green';
    context.arc(xt, yt,ball.radius, 0, Math.PI * 2, true);
    context.fill();
    context.closePath();


}

/**
 * 画出三角函数的运动轨迹
 */
function draw(){
    context.fillStyle = '#cccccc';
    context.fillRect(0, 0, 500, 500);
    context.strokeRect(0, 0, 500, 500);


    // 画出x轴和y轴
    context.beginPath();
    context.strokeStyle = '#0000000';
    // 计算出x的起点和终点
    var xStrat = new Point(orgin.x, orgin.y);
    var xEnd = new Point(xStrat.x + xlen, orgin.y);
    var yStrat = new Point(orgin.x, orgin.y - Math.floor(ylen / 2));
    var yEnd = new Point(orgin.x, yStrat.y + ylen);
    context.moveTo(xStrat.x, xStrat.y);
    context.lineTo(xEnd.x, xEnd.y);
    context.moveTo(yStrat.x, yStrat.y);
    context.lineTo(yEnd.x, yEnd.y);
    context.stroke();
    context.closePath();

    context.fillStyle = 'red';
    // 在坐标轴原点处起始 cos曲线
    context.beginPath();
    var radians = angle * Math.PI/180;
    var x = orgin.x + angle;
    var y = orgin.y - Math.sin(radians) * radious;
    context.arc(x, y, ball.radious, 0, 2 * Math.PI);
    context.fill();
    context.closePath();
    recordSin.push(new Point(x, y));

    // sin曲线
    context.beginPath();
    radians = angle * Math.PI/180;
    y = orgin.y - Math.cos(radians) * radious;
    context.arc(x, y, ball.radious, 0, 2 * Math.PI);
    context.fill();
    context.closePath();

    recordCos.push(new Point(x, y));

    // 画出轨迹
    for (var i = 0, len = recordSin.length; i < len; i++) {

        context.fillStyle = 'green';
        context.beginPath();
        context.arc(recordSin[i].x, recordSin[i].y, 1, 0, 2 * Math.PI);
        context.fill();
        context.closePath();
        context.beginPath();
        context.arc(recordCos[i].x, recordCos[i].y, 1, 0, 2 * Math.PI);
        context.fill();
        context.closePath();
    }

    angle += speed;
    if (angle > 360 || angle < 0) {
        speed = - speed;
    }
}



// var ball = null, speed = null, angle = null, radiusInc = null, luo=null;

// 交叉的曲线
// var p0 = new Point(150, 440);
// var p2 = new Point(450, 10);
// var p1 = new Point(50, 10);
// var p3 = new Point(320, 450);

var orgin = new Point(20, 250);
var xlen = 400;
var ylen = 400;
var radious = 90;
var angle = 0;
var maxAngle = 360;
var speed = 3;
var ball = {
    radious: 8,
};

// 存放轨迹
var recordSin = [];
var recordCos = [];


var record = [];

(function(){
    // speed = 2;
    // angle = 0;
    // radiusInc = 0.3;
    // ball = new Ball(200, 200, 100);
    // luo = new Ball(200, 200, 100);
    window.setInterval("draw()", 50);

    // draw();
})();